<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
	</body>
	<script type="text/javascript">
		function draw(){
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			
			context.save();
			context.translate(canvas.width/2,canvas.height/2);
//			context.transform(1,0,0,1,canvas.width/2,canvas.height/2);
			context.fillStyle = "red";
			context.fillRect(20,40,50,60);
			
			context.fillStyle = "blue";
			context.transform(1,0.5,0,1,0,0);
			context.fillRect(20,30,40,50)
			context.restore();
		}
		window.addEventListener("load",draw,true);
	</script>
</html>
